<template>

  <div class="DataBoard_container main_container">

    <div class="main_header">
      <div class="padding_container">
        <div class="left"><Breadcrumb /></div>
        <div class="right">
          <a class="right_setting" @click="setup">
            <svg-icon icon-class="设置" />
          </a>
        </div>
      </div>
    </div>
    <div class="DataBoard_container_main">
      <div class="DataBoard_container_main_statistics">
        <div class="DataBoard_container_main_statistics_container">
          <a v-for="(item,index) in showStatisticsItem" :key="index" class="statistics_item" @click="routeGo(item)">
            <div class="statistics_item_inner">
              <div class="statistics_item_icon" :style="{backgroundColor:item.bgColor}"><svg-icon :icon-class="item.icon" /></div>
              <div class="statistics_item_number">{{ statisticsData[item.dataKey] }}</div>
              <div class="statistics_item_background1" />
              <div class="statistics_item_background" />
              <div class="statistics_item_name">{{ item.name }}</div>
            </div>
          </a>
        </div>
      </div>
      <div class="DataBoard_container_main_charts">
        <div v-for="(item,index) in showChartItem" :key="index" class="charts_item" :class="item.length?'double':''">
          <WarehouseInventoryProportion v-if="item.component=='WarehouseInventoryProportion'" />
          <MaterialClassificationInventory v-if="item.component=='MaterialClassificationInventory'" />
          <OverstockedMaterials v-if="item.component=='OverstockedMaterials'" />
          <LowstockedMaterials v-if="item.component=='LowstockedMaterials'" />
          <InboundOutboundNotifications v-if="item.component=='InboundOutboundNotifications'" :notice="item.notice" />
        </div>
      </div>

    </div>
  </div>
</template>

<script>

import { deviceHeadDate } from '@/api/warehouseManagement/warehouseSignage' // 接口
import WarehouseInventoryProportion from './components/WarehouseInventoryProportion.vue' // 仓库库存占比
import MaterialClassificationInventory from './components/MaterialClassificationInventory.vue' // 物料分类库存占比
import OverstockedMaterials from './components/OverstockedMaterials.vue' // 超储物料
import LowstockedMaterials from './components/LowstockedMaterials.vue' // 低储物料
import InboundOutboundNotifications from './components/InboundOutboundNotifications.vue' // 出入库通知
import Setup from './components/newSetUp.vue'
import { getPageSettings } from '@/api/common/common'
import { mapGetters } from 'vuex'
export default {
  name: 'DataBoard',
  components: {
    WarehouseInventoryProportion,
    MaterialClassificationInventory,
    OverstockedMaterials,
    LowstockedMaterials,
    InboundOutboundNotifications
  }, // 组件注册
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  data() {
    return {
      capacityNumber: 100,
      OEENumber: 100,
      timer: undefined,
      id: '',
      statisticsItem: [ // 可选的统计数据项
        { name: '物料总数', icon: '物料总数', dataKey: 'materialCount', bgColor: 'rgba(201, 238, 255,.3)', isShow: true },
        { name: '待入库单', icon: '待入库单', dataKey: 'waitIn', bgColor: 'rgba(255, 235, 201,.3)', isShow: true },
        { name: '待出库单', icon: '待出库单', dataKey: 'waitOut', bgColor: 'rgba(255, 235, 201,.3)', isShow: true },
        { name: '待盘点单', icon: '待盘点单', dataKey: 'waitCheck', bgColor: 'rgba(255, 235, 201,.3)', isShow: true },
        { name: '超储物料数量', icon: '超储物料数量', dataKey: 'overStorage', bgColor: 'rgba(255, 201, 201,.3)', isShow: true },
        { name: '低储物料数量', icon: '低储物料数量', dataKey: 'lowStorage', bgColor: 'rgba(201, 255, 225,.3)', isShow: true }
      ],
      chartItem: [// 可选的图表项
        { name: '仓库库存占比', component: 'WarehouseInventoryProportion', isShow: true },
        { name: '物料分类库存占比', component: 'MaterialClassificationInventory', isShow: true },
        { name: '超储物料明细', component: 'OverstockedMaterials', isShow: true },
        { name: '低储物料明细', component: 'LowstockedMaterials', isShow: true },
        { name: '出入库通知', component: 'InboundOutboundNotifications', length: 2, notice: 24, isShow: true }
      ],
      statisticsData: {},
      pageId: '仓库看板',
      showStatisticsItem: [], // 真正展示的统计数据项
      showChartItem: [] // 真正展示的图表项
    }
  },
  mounted() {
    this.getPageSettings()
    this.getStatisticsData()
    this.timer = setInterval(() => {
      this.getStatisticsData()
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 获取顶部统计数据
    getStatisticsData() {
      deviceHeadDate().then(res => {
        this.statisticsData = res.data
      })
    },
    // 设置
    setup() {
      // 遍历 chartItem ，如果有新加的 chartItem，但是之前保存的showChartItem 里没有 ，那么它也要传到设置页，不然设置页看不到
      const cacheChartItem = this.$deepClone(this.showChartItem)
      // this.chartItem.forEach(item => {
      //   if (!this.showChartItem.some(item2 => item2.component == item.component)) {
      //     cacheChartItem.push(item)
      //   }
      // })
      // statisticsItem 也一样
      const cacheStatisticsItem = this.$deepClone(this.showStatisticsItem)
      // this.statisticsItem.forEach(item => {
      //   if (!this.showStatisticsItem.some(item2 => item2.dataKey == item.dataKey)) {
      //     cacheStatisticsItem.push(item)
      //   }
      // })
      this.$layer.iframe({
        // 弹框
        content: {
          content: Setup, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            settingData: {
              StatisticsItem: cacheStatisticsItem, // 显示设置的数据
              ChartItem: cacheChartItem, // 字段搜索的数据
              id: this.id,
              pageId: this.pageId // 页面唯一标识
            }
          } // props
        },
        area: ['1000px', '700px'],
        title: '看板设置', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    // 获取页面展示模块
    getPageSettings() {
      getPageSettings({ userId: this.userId, pageId: this.pageId }).then(res => {
        if (res.data.json) {
          const pageSetings = res.data.json

          this.showStatisticsItem = pageSetings.StatisticsItem
          this.showChartItem = pageSetings.ChartItem

          this.id = res.data.id
        } else {
          this.showStatisticsItem = this.$deepClone(this.statisticsItem.filter(item => item.isShow)) // 头部数据
          this.showChartItem = this.$deepClone(this.chartItem.filter(item => item.isShow)) // 下部模块数据
        }
        this.OEENumber = this.showChartItem.filter(item => item.component == 'OEESequenceDiagram')[0].number
        this.capacityNumber = this.showChartItem.filter(item => item.component == 'CapacityStatistics')[0].number
      })
    },
    routeGo(data) {
      console.log(data)
      let routeData = {} // 跳转过去之后带上的查询参数
      let router = {} // 跳转的路由
      switch (data.dataKey) {
        case 'materialCount': // 物料总数
          routeData = {
            status: 1
          }
          router = '/warehouseManagement/materialInfo' // 物料信息页面
          break
        case 'waitIn': // 待入库单
          routeData = {
            status: '0'
          }
          router = '/warehouseManagement/enterWarehouse' // 入库单
          break
        case 'waitOut': // 待出库单
          routeData = {
            status: '0'
          }
          router = '/warehouseManagement/outWarehouse'
          break
        case 'waitCheck': // 待盘点单
          routeData = {
            status: '0'
          }
          router = '/warehouseManagement/warehouseCheck'
          break
        case 'overStorage': // 超储物料清单
          routeData = {
            isExceeded: 1,
            storageStatus: '超储',
            isAll: '1',
            checked: true
          }
          router = '/warehouseManagement/warehouseInventory'
          break
        case 'lowStorage': // 低储物料清单
          routeData = {
            isExceeded: 0,
            storageStatus: '低储',
            isAll: '1',
            checked: true
          }
          router = '/warehouseManagement/warehouseInventory'
          break
      }
      // 查询参数存入 vuex
      this.$store.state.common.routeData = routeData

      // 进行页面跳转
      this.$router.push({ path: router })
    }
  }
}
</script>

<style lang="less" scoped>
.DataBoard_container{
  //box-shadow: inset 0px 0px 12px 0px rgba(29, 65, 134, 0.18);
 background-color: #f7f8fa;
  //background-color: #5a5e66;
  overflow-y: auto;
  .right_setting{
    font-size: 20px;
  }
  .DataBoard_container_main{
    padding: 10px 20px 20px 20px;
  }

  .DataBoard_container_main_statistics{
    width: 100%;
    display: flex;
// justify-content:space-between;
    .DataBoard_container_main_statistics_container{
      display: flex;flex-wrap: wrap;
     min-width: calc(100% + 20px);
      margin-left: -10px;
    }
    .statistics_item{
      flex: 0 0 16.6667%;
      height: 100px;
      border-radius: 4px;
      .statistics_item_inner{
        margin: 0 10px;
      }

      .statistics_item_background1{
        width: 100%;
        height: 30px;
      }
      .statistics_item_background{
        width: 100%;
        height: 70px;
        background-color: white;
        border-radius: 4px;
      }
      .statistics_item_icon{
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: rgba(255, 201, 201, 1);
        float: left;
        left: 20px;
        position: relative;
        font-size: 26px;
        display: flex;justify-content: center;align-items: center;
      }
      .statistics_item_number{
        float: right;
        right: 20px;
        position: relative;
        color: rgba(51, 51, 51, 1);
        font-size: 36px;
        height: 60px;
        line-height: 60px;
      }
      .statistics_item_name{
        float: right;
        right: 20px;
        position: relative;
        color: rgba(153, 153, 153, 1);
        font-size: 16px;
        top: -35px;
      }
    }

    .statistics_item:hover{
      .statistics_item_background{
        background-color: rgba(56, 123, 252, 0.5);
      }
      .statistics_item_name{
        color: white;
      }
    }

    .statistics_item:first-child{
      margin-left: 0px;
    }
  }

  .DataBoard_container_main_charts{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .charts_item{
      width: calc(50% - 10px);
      background-color: white;
      height: 310px;
      margin-top: 20px;
      border-radius: 4px;
    }
    .charts_item.double{
      width: 100%;
    }

  }

}
</style>
